<template>
  <div class="footer-nav">
    <van-tabbar
      v-model="active"
      @change="onChange"
      route
      active-color="#1cfa28"
    >
      <template v-for="item in routeList" :key="item.path">
        <van-tabbar-item :name="item.name" :to="item.path" :icon="item.icon">{{
          item.text
        }}</van-tabbar-item>
      </template>

      <!-- <van-tabbar-item name="shopMall" to="/spring/shopMall" icon="friends-o"
        >商城</van-tabbar-item
      >
      <van-tabbar-item name="popScience" to="/spring/popScience" icon="search"
        >科普</van-tabbar-item
      >
      <van-tabbar-item name="mine" to="/spring/mine" icon="home-o"
        >我的</van-tabbar-item
      > -->
    </van-tabbar>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, watchEffect, toRefs } from 'vue'
import { useRoute } from 'vue-router'

export default defineComponent({
  setup(props, context) {
    const state = reactive({
      routeList: [
        {
          path: '/spring/rain',
          icon: 'setting-o',
          name: 'rain',
          text: '春雨医生'
        },
        {
          path: '/spring/shopMall',
          icon: 'friends-o',
          name: 'shopMall',
          text: '商城'
        },
        {
          path: '/spring/popScience',
          icon: 'search',
          name: 'popScience',
          text: '科普'
        },
        {
          path: '/spring/mine',
          icon: 'home-o',
          name: 'mine',
          text: '我的'
        },
        {
          path: '/spring/demo',
          icon: 'home-o',
          name: 'mine',
          text: '案例'
        }
      ]
    })
    const active = ref('rain')
    const route = useRoute()

    const handleSubmitActive = (index: number | string) => {
      context.emit('onFooterNavActive', index)
    }

    const onChange = (index: string | number) => {
      console.log('index:', index)
      handleSubmitActive(index)
    }

    const { routeList } = toRefs(state)

    return {
      routeList,
      active,
      onChange
    }
  }
})
</script>
<style scoped lang="scss">
.footer-nav {
  height: 1rem;
}
</style>
